<template>
    <section class="bk-layout-custom-component-wrapper container-jlbpcnpk">
        <div class="bk-layout-component-jlbpcnpk blockE4c88">
            <bk-swiper
                :is-loop="true"
                :loop-time="8000"
                :pics="swiper89c63pics"
                class="bk-layout-component-jlbpcnpk swiper89c63">
            </bk-swiper>
        </div>

        <div class="bk-layout-row-jlbpcnpk grid-86cc8">
            <div class="bk-layout-col-jlbpcnpk column-1fd66">
                <bk-button
                    title="hello world"
                    size="normal"
                    theme="primary"
                    :disabled="false"
                    :loading="false"
                    class="bk-layout-component-jlbpcnpk button8bb75"
                    @click="changeisShowEdit">
                    新建帖子
                </bk-button>

                <div
                    class="bk-free-layout-jlbpcnpk free-layout-3cccf"
                    v-for="(freeLayout3cccfItem, freeLayout3cccfIndex) in bbsList"
                    :key="freeLayout3cccfIndex">
                    <div style="position: absolute; top: 21px; left: 38px;">
                        <bk-link
                            theme="primary"
                            href=""
                            :disable="false"
                            :underline="false"
                            icon=""
                            icon-placement="left"
                            class="bk-layout-component-jlbpcnpk link74da9"
                            @click="(...args) => goToDetail(freeLayout3cccfItem.id, ...args)">
                            <render-html :html="`<span>${freeLayout3cccfItem.title}</span>`"></render-html></bk-link>
                    </div>
                    <div style="position: absolute; top: 58px; left: 19px; width: 137px;">
                        <span title="" class="bk-layout-component-jlbpcnpk textBbffa">
                            {{ freeLayout3cccfItem.createUser }}</span>
                    </div>
                    <div style="position: absolute; top: 58px; left: 158px; width: 360px;">
                        <span title="" class="bk-layout-component-jlbpcnpk text05981">
                            {{ freeLayout3cccfItem.createTime }}</span>
                    </div>
                    <div style="position: absolute; top: 59px; left: 540px;">
                        <bk-icon type="dialogue" size="14px" class="bk-layout-component-jlbpcnpk bkIcon1a3fe"></bk-icon>
                    </div>
                    <div style="position: absolute; top: 58px; left: 561px;">
                        <bk-animate-number
                            :value="0"
                            :digits="0"
                            class="bk-layout-component-jlbpcnpk animateNumber33a2b"></bk-animate-number>
                    </div>
                </div>
            </div>
            <div class="bk-layout-col-jlbpcnpk column-ab32f">
                <!-- eslint-disable -->
                <!-- prettier-ignore -->
                <p title=""   class='bk-layout-component-jlbpcnpk paragraphFf9fe'>计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算，又可以进行逻辑计算，还具有存储记忆功能。是能够按照程序运行，自动、高速处理海量数据的现代化智能电子设备。
由硬件系统和软件系统所组成，没有安装任何软件的计算机称为裸机。可分为超级计算机、工业控制计算机、网络计算机、个人计算机、嵌入式计算机五类，较先进的计算机有生物计算机、光子计算机、量子计算机等。
计算机发明者约翰·冯·诺依曼。计算机是20世纪最先进的科学技术发明之一，对人类的生产活动和社会活动产生了极其重要的影响，并以强大的生命力飞速发展。它的应用领域从最初的军事科研应用扩展到社会的各个领域，已形成了规模巨大的计算机产业，带动了全球范围的技术进步，由此引发了深刻的社会变革，计算机已遍及一般学校、企事业单位，进入寻常百姓家，成为信息社会中必不可少的工具。</p>
                <!-- eslint-enable -->
            </div>
        </div>

        <bk-sideslider
            :is-show.sync="isShowEdit"
            title="新增帖子"
            :quick-close="true"
            :show-mask="true"
            :width="600"
            direction="right"
            class="bk-layout-component-jlbpcnpk sidesliderFe6ac">
            <template slot="content">
                <div class="bk-layout-component-jlbpcnpk block5995d">
                    <div class="bk-layout-component-jlbpcnpk form27b04" style="">
                        <bk-form
                            :model="form27b04model"
                            :rules="form27b04rules"
                            ref="form"
                            form-type="horizontal"
                            :label-width="150">
                            <bk-form-item
                                property="title"
                                label="标题"
                                :label-width="150"
                                error-display-type="normal"
                                :required="false"
                                :icon-offset="8"
                                :auto-check="false"
                                class="bk-layout-component-jlbpcnpk">
                                <bk-input
                                    type="text"
                                    font-size="normal"
                                    :disabled="false"
                                    :readonly="false"
                                    :clearable="true"
                                    :show-controls="true"
                                    class="bk-layout-component-jlbpcnpk input15233"
                                    v-model="form27b04model.title">
                                </bk-input>
                            </bk-form-item>
                            <bk-form-item
                                property="content"
                                label="内容"
                                :label-width="150"
                                error-display-type="normal"
                                :required="false"
                                :icon-offset="8"
                                :auto-check="false"
                                class="bk-layout-component-jlbpcnpk">
                                <bk-input
                                    type="text"
                                    font-size="normal"
                                    :disabled="false"
                                    :readonly="false"
                                    :clearable="true"
                                    :show-controls="true"
                                    class="bk-layout-component-jlbpcnpk inputE85e2"
                                    v-model="form27b04model.content">
                                </bk-input>
                            </bk-form-item>
                            <bk-form-item
                                property=""
                                label=""
                                :label-width="150"
                                error-display-type="normal"
                                :required="false"
                                :icon-offset="8"
                                :auto-check="false"
                                class="bk-layout-component-jlbpcnpk">
                                <bk-button
                                    title="hello world"
                                    size="normal"
                                    theme="primary"
                                    :disabled="false"
                                    :loading="false"
                                    class="bk-layout-component-jlbpcnpk button63e62"
                                    @click="addBBSData">
                                    提交
                                </bk-button>
                                <bk-button
                                    title="hello world"
                                    size="normal"
                                    theme="default"
                                    :disabled="false"
                                    :loading="false"
                                    class="bk-layout-component-jlbpcnpk buttonA8782">
                                    取消
                                </bk-button>
                            </bk-form-item>
                        </bk-form>
                    </div>
                </div>
            </template>
        </bk-sideslider>
    </section>
</template>
<script>
    /**
     * 请先安装 bk-magic-vue 组件库、bkui-vue-complex 复合组件库
     * bk-magic-vue 组件库: https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/example/index.html#/install
     * bkui-vue-complex 复合组件库: https://github.com/TencentBlueKing/lesscode-comp
     *
     * 如果页面使用了远程函数，单独使用本页面，需要确保项目 store 下有相应的方法，后端有相应的转发接口
     */

    import methodsMixin from '@/mixins/methods-mixin'
    export default {
        mixins: [methodsMixin],
        data () {
            function getInitVariableValue (defaultValue, defaultValueType) {
                let val = defaultValue.all
                if (defaultValueType === 1) val = defaultValue[window.BKPAAS_ENVIRONMENT]
                return val
            }
            return {
                swiper89c63pics: [
                    {
                        url:
                            'https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/example/example/static/images/firstswiper.jpg'
                    },
                    {
                        url:
                            'https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/example/example/static/images/secondswiper.jpg'
                    }
                ],
                form27b04model: { title: '', content: '' },
                form27b04rules: { title: [], content: [] },
                bbsList: getInitVariableValue(
                    { all: [], prod: ['Jack', 'Lucy', 'Lily'], stag: ['Jack', 'Lucy', 'Lily'] },
                    0
                ),
                isShowEdit: getInitVariableValue({ all: false, prod: false, stag: false }, 0)
            }
        },

        created () {
            this.getBBSDataList()
        }
    }
</script>
<style lang="css" scoped>
    .container-jlbpcnpk {
        padding-left: 200px;
        padding-right: 200px;
        padding-top: 20px;
        padding-bottom: 0px;
        height: 100%;
    }
    .bk-layout-row-jlbpcnpk {
        display: flex;
    }
    .bk-layout-row-jlbpcnpk:after {
        display: block;
        clear: both;
        content: '';
        font-size: 0;
        height: 0;
        visibility: hidden;
    }
    .bk-layout-col-jlbpcnpk {
        float: left;
        position: relative;
        min-height: 1px;
    }
    .bk-free-layout-jlbpcnpk {
        height: 500px;
        width: 100%;
        display: inline-block;
        position: relative;
    }
    .bk-free-layout-item-inner-jlbpcnpk {
        height: 100%;
        position: relative;
    }
    .bk-form-radio {
        margin-right: 20px;
    }
    .bk-form-checkbox {
        margin-right: 20px;
    }
    .echarts {
        width: 100%;
        height: 100%;
    }
    /* 设置 bk-exception 组件宽度为 100% */
    .bk-exception-img {
        width: 100%;
    }
    .bk-form-item {
        margin: 10px;
    }
    .bk-sideslider {
        margin: 0;
    }
    /* 设置 .bk-form-control 组件宽度为 auto */
    .bk-form-control {
        width: auto;
    }
    .bk-form-control .bk-input-text {
        font-size: 12px;
    }
    [align-horizontal-left] > *,
    [align-horizontal-center] > *,
    [align-horizontal-right] > *,
    [align-horizontal-space-between] > *,
    [align-vertical-top] > *,
    [align-vertical-center] > *,
    [align-vertical-bottom] > * {
        flex-shrink: 0;
    }
    [align-horizontal-left],
    [align-horizontal-center],
    [align-horizontal-right],
    [align-horizontal-space-between] {
        display: flex !important;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    [align-horizontal-left] {
        justify-content: flex-start;
    }
    [align-horizontal-center] {
        justify-content: center;
    }
    [align-horizontal-right] {
        justify-content: flex-end;
    }
    [align-horizontal-space-between] {
        justify-content: space-between;
    }
    [align-vertical-top],
    [align-vertical-center],
    [align-vertical-bottom] {
        display: flex !important;
        flex-wrap: wrap;
    }
    [align-vertical-top] {
        align-items: flex-start;
    }
    [align-vertical-center] {
        align-items: center;
    }
    [align-vertical-bottom] {
        align-items: flex-end;
    }
    [absolute-align-horizontal-left] {
        left: 0 !important;
    }
    [absolute-align-horizontal-center] {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    [absolute-align-horizontal-right] {
        left: unset !important;
        right: 0 !important;
    }
    [absolute-align-vertical-top] {
        top: 0 !important;
    }
    [absolute-align-vertical-center] {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    [absolute-align-vertical-bottom] {
        top: unset !important;
        bottom: 0 !important;
    }
    [absolute-align-horizontal-center][absolute-align-vertical-center] {
        transform: translate(-50%, -50%) !important;
    }

    .bk-layout-component-jlbpcnpk.blockE4c88 {
        display: block;
        width: 100%;
    }
    .bk-layout-component-jlbpcnpk.swiper89c63 {
        width: 100%;
        height: 300px;
        margin-left: 0;
    }
    .grid-86cc8 {
        margin-top: 30px;
    }
    .column-1fd66 {
        width: 75%;
    }
    .bk-layout-component-jlbpcnpk.button8bb75 {
        display: inline-block;
        vertical-align: middle;
    }
    .free-layout-3cccf {
        height: 105px;
        margin-top: 8px;
        margin-left: 0;
        width: 100%;
        border-bottom: 1px solid rgb(221, 228, 235);
    }
    .bk-layout-component-jlbpcnpk.link74da9 {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }
    .bk-layout-component-jlbpcnpk.textBbffa {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
        width: 137px;
    }
    .bk-layout-component-jlbpcnpk.text05981 {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
        width: 360px;
    }
    .bk-layout-component-jlbpcnpk.bkIcon1a3fe {
        display: inline-block;
        font-size: 14px;
        vertical-align: middle;
    }
    .bk-layout-component-jlbpcnpk.animateNumber33a2b {
        display: inline-block;
        vertical-align: middle;
    }
    .column-ab32f {
        width: 25%;
        font-family: PingFang SC, sans-serif;
        line-height: 20px;
        letter-spacing: 3px;
        padding-left: 20px;
        padding-top: 20px;
    }
    .bk-layout-component-jlbpcnpk.paragraphFf9fe {
        display: inline-block;
        width: 100%;
        height: 102px;
        text-align: left;
        font-size: 14px;
        white-space: pre-wrap;
        word-break: break-all;
        margin-left: 0;
    }
    .bk-layout-component-jlbpcnpk.sidesliderFe6ac {
        display: inline-block;
    }
    .bk-layout-component-jlbpcnpk.block5995d {
        display: block;
        width: 100%;
    }
    .form27b04 {
        margin-left: 0;
        width: 100%;
    }
    .bk-layout-component-jlbpcnpk.input15233 {
        display: inline-block;
        vertical-align: middle;
        width: 300px;
    }
    .bk-layout-component-jlbpcnpk.inputE85e2 {
        display: inline-block;
        vertical-align: middle;
        width: 300px;
    }
    .bk-layout-component-jlbpcnpk.button63e62 {
        display: inline-block;
        vertical-align: middle;
        width: 88px;
    }
    .bk-layout-component-jlbpcnpk.buttonA8782 {
        display: inline-block;
        vertical-align: middle;
        width: 88px;
        margin-left: 8px;
    }
</style>
